<template>
  <div class="Header">
    <h1>Header</h1>
    <!-- <p>共享的值:{{ this.$store.state.count }}</p> -->
    <p>count的值:{{ count }}</p>
    <p>price的值:{{ price }}</p>
    <button @click="increament">点我+1</button>
    <!-- <button @click="increamentN(5)">点我+N</button> -->
    <button @click="increamentN({n:5})">点我+N</button>
  </div>
</template>

<script>
// 在单独构建的版本中辅助函数为 Vuex.mapState
// mapMutations
import { mapMutations, mapState } from "vuex";
export default {
  name: "Header",
  mounted() {
    // console.log(mapState(["count"]));
    //Vuex给Vue身上添加了$store属性
    // console.log(this.$store.state.count);
    // console.log(this, "this");
    // console.log(mapState, "mapState");
    // console.log(mapState(["count"]), "mapState调用");
    // "TypeError: Cannot read properties of undefined (reading 'state')"
    //调用生成computed属性
    // console.log(mapState(["count"]).count.call(this), "mapState调用");
  },
  methods: {
    // ...mapMutations(["increament","increamentN"])
    // ...mapMutations({ add1: "increament", addN: "increamentN" }),
    ...mapMutations({ increament: "increament", increamentN: "increamentN" }),
    // add1() {
    //   this.$store.commit("increament");
    // },
    // addN() {
    //   this.$store.commit("increamentN",5);
    // },
  },
  computed: {
    // mapState，优化计算属性，下面写下mapState的几种写法,首先得理解，你让mapState这个函数帮我们生成计算属性，那么它怎么生成，以及它生成的计算属性是哪个，这样我们就得告诉他一些信息，（要生成的计算属性的名，还有计算属性的值 即去仓库中找某个state的值）
    //直接使用mapState去获取store中的值,并且提供了计算属性给我们,我们展开放在computed中
    ...mapState(["count", "price"]),
    //  count() {
    //   return this.$store.state.count;
    // },
    // price() {
    //   return this.$store.state.price;
    // }, 
  },
};
</script>

<style>
.Header {
  margin: 30px;
  background: green;
}
</style>